<template>
  <div class="">
    <h2>学员管理</h2>

    <hr />
    <el-form :inline="true" :model="ser" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="ser.nickname" placeholder="输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="ser.mobile" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="学员状态">
        <el-select v-model="ser.status" placeholder="学员状态">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>

          <!-- 空字符串是false 除了空以外的字符串都是 true -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-button @click="remove">批量删除</el-button>

    <el-table
      :data="reslist"
      style="width: 100%"
      border
      @selection-change="select"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="uid" label="id" width="120"> </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <img style="width:80px;height:80px;" :src="scope.row.avatar" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码" width="180">
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.status ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.created_at | filtime }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" round @click="del(scope.$index)"
            >删除</el-button
          >
          <el-button size="mini" round @click="edit(scope.$index)"
            >编辑</el-button
          >
          <!-- <a href="###" @click.prevent="del(scope.$index)">删除</a> -->

          <el-button
            size="mini"
            round
            v-if="scope.row.status == 0"
            @click="scope.row.status = !scope.row.status"
            >启用</el-button
          >
          <el-button
            size="mini"
            round
            v-else
            @click="scope.row.status = !scope.row.status"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 假设一个数据直接展示那么 就是用prop展示 如果不能直接展示的 就要用插槽 
     <template slot-scope="scope">{{ scope.row }}</template>
     是一个固定的写法  scope.row 就相当于是item 就是本行数据  scope.$index 就是下标 -->

    <!-- <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination> -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length"
    >
    </el-pagination>
    <!-- 复制的是完整功能的分页器  -->
    <!-- total代表 一共有几条数据 page-size代表 每页多少条数据  -->
    <!-- page-sizes 代表可以选择的每页的条数（下拉列表）  -->
    <!-- background 的意思是带有背景色  -->
    <!-- layout 代表这个分页器的布局 有什么功能 -->
    <!-- current-page 的意思是当前是第几页 -->
    <!-- @size-change 这个事件会在每页多少条改变的时候触发 -->
    <!-- @current-change 指的是当前的页码发生改变的时候会触发 点击上一页下一页 还有第几页 跳转第几页都会触发这个事件 -->

    <el-dialog title="修改" :visible.sync="showEdit">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      //列表数据
      showEdit: false,
      //编辑弹框的显示隐藏
      form: {
        nickname: "",
        mobile: "",
      },
      //编辑弹框里的表单
      editIndex: -1,
      //要编辑的下标
      ser: {
        nickname: "",
        mobile: "",
        status: "",
      },
      //搜索的v-model的值
      copylist: [],
      //为了搜索备份的数据
      sel: [],
      //用来保存复选框选中的数据

      pagenum: 2,
      //当前是第几页
      pagesize: 5,
      //每页多少条
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$axios.get("list.json").then((res) => {
        console.log(res);
        this.list = res.data;
        this.copylist = this.list;
      });
    },
    //进入页面请求列表数据 并且备份一份数据
    del(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击删除按钮根据传来的下标删除这条数据  在这里用到了 element-ui的弹框
    edit(index) {
      this.editIndex = index;
      this.showEdit = true;
      this.form.nickname = this.list[index].nickname;
      this.form.mobile = this.list[index].mobile;
      //回填
    },
    //点击修改 按钮 把要修改的下标存下来 让编辑框显示 并且回填数据
    update() {
      this.list[this.editIndex].nickname = this.form.nickname;
      this.list[this.editIndex].mobile = this.form.mobile;
      this.showEdit = false;
    },
    //更新数据 点击修改框里的确定按钮 根据刚才保存的下标 进行数据修改 让弹框隐藏
    search() {
      if (this.ser.status == "") {
        this.list = this.copylist.filter((item) => {
          // return (
          //   item.nickname.includes(this.ser.nickname) &&
          //   item.mobile.includes(this.ser.mobile)
          // );
          return (
            item.nickname.indexOf(this.ser.nickname) != -1 &&
            item.mobile.indexOf(this.ser.mobile) != -1
          );
        });
      } else {
        this.list = this.copylist.filter((item) => {
          return (
            item.nickname.indexOf(this.ser.nickname) != -1 &&
            item.mobile.indexOf(this.ser.mobile) != -1 &&
            item.status == this.ser.status
          );
        });
      }
    },
    //在搜索的时候 分为两种情况 没有选择 状态的时候只对用户名和电话进行搜索
    // 选择了状态的时候对三个条件进行搜索

    select(val) {
      console.log(val);
      //这个事件会在复选框点击的时候触发 带的默认的参数就是复选框选中的数据（是整条数据）
      this.sel = val;
      //sel用来保存要删除的数据
    },
    remove() {
      // 选中删除 可以理解为把要删的删掉
      // 也可以理解为把不删的留下来
      this.list = this.list.filter((item) => {
        return this.sel.includes(item) == false;
      });
      //从list中把 不在sel中的数据筛选出来 （不在sel中就证明这个数据是不删的）
    },

    handleSizeChange(val) {
      // 这个事件在每页的条数发生改变的时候会触发默认的参数是 每页多少条条
      console.log("每页的条数发生改变" + val);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      //这个事件会在 页码发生改变的时候触发 默认的参数是当前是第几页
      console.log("页码改变" + val);
      this.pagenum = val;
    },
    //把当前的页码和每页条数存下来 存下来才能对json数据进行拆分  如果是接口 才能告诉后台我要请求什么数据
  },
  computed: {
    reslist() {
      // 1 5  0-4
      // 2 5  5-9
      // 3 5  10-14
      return this.list.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagenum * this.pagesize
      );
      //slice 方法 截取数组 包头不包尾 从第一数值的下标开始 截取到 第二个数值的位置
    },
  },
  components: {},
  filters: {
    filtime(val) {
      var time = new Date(val * 1000);

      return time.toLocaleString();
    },
  },
  //对时间格式进行过滤
};
</script>

<style lang="scss"></style>
